<template>
  <div class="setup-banner">
    <el-header style="font-size: 20px; font-weight: bold">
      <i class="el-icon-s-tools" style="margin-right: 15px"></i>
      <span>系统设置</span>
    </el-header>
    <el-form
      :inline="true"
      :model="form"
      ref="form"
      style="min-width: 780px"
      class="demo-form-inline"
    >
      <el-row style="text-align: center">
        <el-col :span="12">
          <el-form-item label="更换中台地址">
            <el-input
              style="margin: 0px 40px 0px 10px"
              v-model="form.ip"
              placeholder="IP地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统模式">
            <el-select
              style="margin: 0px 40px 0px 10px"
              v-model="form.mode"
              placeholder="系统模式"
            >
              <el-option label="被动模式" value="passive"></el-option>
              <el-option label="主动模式" value="active"></el-option>
              <el-option label="双引擎模式" value="dualengine"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-col :span="12">
          <el-form-item style="margin-left: 28px" label="中台端口">
            <el-input
              style="margin: 0px 40px 0px 10px"
              v-model="form.port"
              placeholder="端口号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="padding-right: 16px" label="中台路径">
            <el-input
              style="margin: 0px 40px 0px 10px"
              v-model="form.path"
              placeholder="路径"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="float: right">
        <el-button
          style="margin-left: 10px"
          type="primary"
          v-on:click="register"
          >确认</el-button
        >
      </el-form-item>
    </el-form>
    <el-card style="clear: both" class="box-card card_yellow">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">中台状态</span>
      </div>
      <div v-for="o in 1" :key="o" class="text item">
        <p>软件版本号：{{ version }}</p>
        <p>中台地址：{{ set_ip }}</p>
        <p>中台通讯端口：{{ set_port }}</p>
        <p>中台路径：{{ set_path }}</p>
        <p>设备MAC信息：{{ mac }}</p>
        <p>监测模式：{{ mode }}</p>
      </div>
      <el-upload
        style="float: right; margin: 0px 20px 10px 0px"
        action="update_cursec"
        :limit="1"
        :http-request="UploadFile"
        :show-file-list="false"
        :file-list="fileList"
      >
        <el-button type="success">导入更新包</el-button></el-upload
      >
    </el-card>
    <el-card style="clear: both" class="box-card card_green">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">消息队列</span>
      </div>
      <div>
        <p>任务提醒</p>
        <el-table :data="todoList.slice(0, 5)" :show-header="false">
          <el-table-column width="90">任务名称：</el-table-column>
          <el-table-column prop="task_name" width="180"></el-table-column>
          <el-table-column width="100">任务状态：</el-table-column>
          <el-table-column prop="task_status" width="100"></el-table-column>
        </el-table>
        <br />
        <p>更新提醒</p>
        <div>漏洞数据库有新版本可供升级，版本号V20210205</div>
      </div>
    </el-card>
    <el-card class="box-card card_blue">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">License授权码</span>
      </div>
      <div v-for="o in 1" :key="o" class="text item">
        <p>License：{{ license }}</p>
        <input
          style="float: right; margin: 0px 0px 30px 10px"
          class="file"
          name="file"
          type="file"
          id="file"
          @change="update"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      version: '',
      mode: '',
      set_ip: '',
      set_port: '',
      set_path: '',
      license: '',
      mac: '',
      form: {
        ip: '',
        mode: '',
        port: '',
        path: '',
      },
      LicenseList: [],
      fileList: [],
      todoList: [],
    }
  },
  methods: {
    register: function () {
      axios
        .post('http://localhost:5000/setup_change', {
          ip: this.form.ip,
          mode: this.form.mode,
          port: this.form.port,
          path: this.form.path,
        })
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    update: function (e) {
      let file = e.target.files[0]
      let formData = new FormData() //创建form对象
      formData.append('file', file) //通过append向form对象添加数据
      console.log(formData.get('file'))
      axios({
        method: 'POST',
        url: 'http://127.0.0.1:5000/get_license',
        data: formData,
        header: { 'Content-Type': 'application/x-www-form-urlencoded' },
      })
        .then((response) => {
          console.log(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    UploadFile(content) {
      //上传文件
    },
  },
  mounted() {
    const url = 'http://localhost:5000/setup'
    axios.get(url).then((response) => {
      const result = response.data
      this.version = result.version
      this.mode = result.mode
      this.license = result.license
      this.mac = result.mac
      this.set_ip = result.set_ip
      this.set_port = result.set_port
      this.set_path = result.set_path
    })
    const url2 = 'http://localhost:5000/history_task'
    axios.get(url2).then((response_task) => {
      const result = response_task.data
      this.todoList = result.tableData
    })
  },
}
</script>

<style lang="scss" scoped>
.setup-banner {
  margin: 0.3%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
}

.el-form {
  margin: 50px 10px;
}

.box-card {
  width: 100%;
  margin-top: 50px;

  .text {
    font-size: 16px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
}
.card_yellow ::v-deep .el-card__header {
  background: rgba(255, 174, 25, 0.877);
  color: white;
}
.card_blue ::v-deep .el-card__header {
  background: rgb(59, 180, 242);
  color: white;
}
.card_green ::v-deep .el-card__header {
  background: rgb(75, 207, 153);
  color: white;
}
</style>
